import React, { useMemo, useState } from 'react'
import { NavBar, Button, Toast, Card, Tag, List, Checkbox, Tabs } from 'antd-mobile'
import { useLocation, useNavigate, useParams, useSearchParams } from 'react-router-dom'
import styles from './order.module.css'
import dayjs from 'dayjs'
import instance from '../../api/instance'
import { AddCircleOutline } from 'antd-mobile-icons'
import { useDispatch, useSelector } from 'react-redux'
import { SwitchPer } from '../../store/PerSonSlice'
import { SubmitBar } from 'react-vant';
import Navbar from '../../components/NavBar/NavBar'

function Index() {
  let navigate = useNavigate()
  let dispatch = useDispatch()
  const { state } = useLocation()
  const { PersonList } = useSelector((state) => state.PerSonReducer)

  const Person = useMemo(() => {
    return PersonList.filter((item) => {
      return item.state
    })
  }, [PersonList])
  console.log(Person)

  const hislist = useMemo(() => {
    if (Person.length === 0) return []
    if (Person.length === 1) {
      return [
        ['A', 'B', 'C', 'D', 'E']
      ]
    }
    if (Person.length === 2) {
      return [
        ['A', 'B', 'C', 'D', 'E'],
        ['A', 'B', 'C', 'D', 'E'],
      ]
    }
    if (Person.length === 3) {
      return [
        ['A', 'B', 'C', 'D', 'E'],
        ['A', 'B', 'C', 'D', 'E'],
        ['A', 'B', 'C', 'D', 'E'],
      ]
    }
    if (Person.length === 4) {
      return [
        ['A', 'B', 'C', 'D', 'E'],
        ['A', 'B', 'C', 'D', 'E'],
        ['A', 'B', 'C', 'D', 'E'],
        ['A', 'B', 'C', 'D', 'E'],
      ]
    }
  }, [Person])

  // const [splist, setSpList] = useState([])
  // const handelXz = useMemo(() => {
  //   return Object.apply(splist)
  // }, [Person,splist])
  // const lastList = (row, pos) => {
  //   const newPer = hislist.slice(-Person.length)
  //   setSit(newPer, { row, pos })
  // }

  //价格
  const price=state.tick.secondTick*Person.length

  //订单详情
  const handelOrderDetail=()=>{
    navigate(`/orderDetail?price=${price}`,{state:state})
  }


  return (
    <div>
      <Navbar title='填写订单'></Navbar>
      <div className={styles.list}>
        <div className={styles.listItem}>
          <span>{state.start}</span>
          <span>====&gt;</span>
          <span>{state.end}</span>
          <span>{state.startTime}</span>
          <span style={{ fontSize: '16px' }}>￥{state.tick.secondTick}起</span>
        </div>
        <div className={styles.listItem}>
          <span>二等座：有票</span>
          <span>一等座：有票</span>
          <span>商务座：有票</span>
        </div>
      </div>
      <div>
        <Card title='选择乘客'>
          <List>
            {
              PersonList.map((item, index) => {
                return <List.Item key={index} description={item.code}
                  extra={<Checkbox checked={item.state} onChange={() => dispatch(SwitchPer(item))} />}>{item.name}</List.Item>
              })
            }
          </List>
          <Button color='warning' fill='solid' size='small' shape='rounded'
            onClick={() => navigate('/addPerson')}>
            <AddCircleOutline />添加乘客（成人/学生/儿童）
          </Button>
        </Card>
        <Tabs>
          <Tabs.Tab title='第1程' key='1'>
            <Card title='选座'>
              {
                hislist.map((item, row) => {
                  return <div key={row}>
                    {
                      item.map((itm, pos) => {
                        return <Tag key={pos} style={{ margin: '5px' }}>{itm}</Tag>
                      })
                    }
                  </div>
                })
              }
              {/* {
                hislist.map((item, row) => {
                  return <div key={row}>
                    {
                      item.map((itm, pos) => {
                        return <Tag key={pos} style={{ margin: '5px' }}
                          onClick={() => handelXz()}
                          color={lastList.some((item) => item.row === row && item.pos === pos) ? 'primary' : 'default'}>{itm}</Tag>
                      })
                    }
                  </div>
                })
              } */}
            </Card>
            <Card title='选座'>
              {
                hislist.length > 0 && [1, 2, 3, 4, 5, 6].map((item, index) => {
                  return <Tag key={index} style={{ margin: '5px' }}>{item}</Tag>
                })
              }
            </Card>
          </Tabs.Tab>
          <Tabs.Tab title='第2程' key='2'>
            第2程
          </Tabs.Tab>
        </Tabs>

      </div>
      <SubmitBar price={price*100} buttonText="提交订单" onSubmit={()=>handelOrderDetail()} />
    </div>
  )
}

export default Index
